<template>
  <div class="mui-numbox" data-numbox-min="1">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input
      id="test"
      class="mui-input-numbox"
      type="number"
      :value="count"
      @change="changeCount($event, cartId)"
    />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>

<script>
// 一、导入mui的js
import mui from "../../../lib/js/mui.js"
// 四、按需导入 mapMutations,获取store中的方法
import { mapMutations } from "vuex"
export default {
  // 二、获取初始值
  props: ["count", "cartId"],
  mounted() {
    // 二、初始化组件
    // mui.init()
    mui(".mui-numbox").numbox()
  },
  data() {
    return {}
  },
  methods: {
    // 三、注册change事件获取最新值
    changeCount(e, id) {
      // console.log(+e.target.value, id)
      this.updateCount({ count: +e.target.value, id })
    },
    // 4.1 映射store中更新商品数量的方法
    ...mapMutations(["updateCount"])
  }
}
</script>

<style lang="scss" scoped></style>
